<template>
	<div class="profit">
		<Head />
		<div class="shuju">
			<div class="mian">
				<div class="mian-p" >
					
					<p class="Pcolor pcor" v-if="pcor">{{DData.MonthMoney}}</p>
					<p class="p maximum">本月总收益</p>
				</div>
				<!-- 申请提现按钮 -->
				<router-link class="sqtx" :to="'/tixian/?TxIncome='+this.xiangqing.TxIncome">申请提现</router-link>

			</div>
			<div class="mian-xia">
				<div >
					<p class="Pcolor" v-if="pcor">{{DData.SumMoney}}</p>
					<p class="p">累计总收益</p>
				</div>
				<div >
					<p class="Pcolor" v-if="pcor">{{DData.TxMoney}}</p>
					<p class="p">已提现收益</p>
				</div>
			</div>
		</div>

		<div class="Tab">
			<div class="risk-tab-top">
				<div class="risk-tab-cont" @click="tabChange(index)" v-for="(item,index) in tabList "
					:class="[activeIndex == index?'risk-active':'']" :key="index">{{item}}</div>
				<div class="risk-active-line"
					:class="{'risk-active-line-f':activeIndex == 0,'risk-active-line-r':activeIndex==1,'risk-active-line-s':activeIndex==2}">
				</div>
			</div>
			<div class="risk-cont">
				<!-- 彩币明细 -->
				<div v-show="activeIndex == 0">
					<div class="zcfx">
						<!--  -->
						<table>
							<tr class="table">
								<td>时间</td>
								<td>售卖数量</td>
								<td>售卖总金额</td>
								<td>打赏</td>
								<td>保障贴扣除</td>
								<td>总收益</td>
							</tr>
							
							<tr v-for="item in this.list" :key="item.sj" class="table-list">
								<td>{{item.Time}}</td>
								<td>{{item.DySumMoney}}</td>
								<td>{{ item.BuySumMoney }}</td>
								<td>{{ item.DsSumMoney }}</td>
								<td>{{ item.BztSumMoney }}</td>
								<td>{{ item.ToDaySumMoney }}</td>
							</tr>
							
						</table>
						<div class="zan" v-if="show">
							暂无数据
						</div>
						<div class="syxq">
							<div>
								<div>
									<span>分成比例</span>&emsp;
									<img src="../assets/img/26123.png" alt="" @click="bl" />
								</div>
								<span class="syxq-shuju" v-text="this.xiangqing.ShareProportion"></span>
							</div>
							<div>
								<span>平台服务费</span>
								<span class="syxq-shuju" v-text="this.xiangqing.PlatformServiceMoney"></span>
							</div>
							<div class="caibi">
								<span>最终收益(彩币):</span>
								<span class="caibi-shuju" v-text="this.xiangqing.TxIncome"> </span>
							</div>
							<div class="box">收益详情</div>
						</div>
					</div>
				</div>
				<!-- 奖励受益 -->
				<div v-show="activeIndex == 1">
					<div class="main-wai">
						<div class="main">
							<div>
								<p style="width: 25%;">全勤奖励</p>
								<p style="width: 50%;display: flex;align-items: center;justify-content: space-between;">
									<span class="jing">专家所申请的彩种，需要满足：当月每期都要有发布预测贴的记录，如有任何一期未发布则视为不满足奖励要求</span>
									<img src="../assets/img/26123.png" alt="" @click="b2()" />
								</p>
							</div>
							<table class="table1">
								<tr>
									<td>奖励说明</td>
									<!-- <td v-text="this.list.MonthTgUserNuber"></td> -->
									<td class="suoming" v-text="this.reward.FullAttendanceAwardExplain"></td>
								</tr>
								<tr>
									<td>全勤奖励</td>
									<!-- <td v-text="this.list.MonthTgUserJf"></td> -->
									<td v-text="this.reward.FullAttendanceAward"></td>
								</tr>
							</table>

							<div>
								<span>中奖率奖励</span>
								<span>中奖率≥70% 获得奖励100元</span>
							</div>
							<table class="table1">
								<tr>
									<td>中奖率</td>
									<!-- <td v-text="this.list.SumJf"></td> -->
									<td v-text="this.reward.WinningRate"></td>
								</tr>
								<tr>
									<td>中奖率奖励</td>
									<!-- <td v-text="this.list.SumCb"></td> -->
									<td v-text="this.reward.WinningRateCash">200元</td>
								</tr>
							</table>
						</div>
						<!-- 合计降收益-->
						<div class="syxq">
							<div>
								<span>收益时间</span>
								<span class="syxq-shuju" v-text="this.reward.Time">2020年09月</span>
							</div>
							<div class="caibi">
								<span>合计收益</span>
								<span class="caibi-shuju money" v-text="this.reward.TotalCash">400元</span>
							</div>
							<div class="box">合计降收益</div>
						</div>
					</div>
				</div>

			</div>
		</div>


		<!-- 假盒子 -->
		<div class="jia-box"></div>
		<div class="footer">
			<router-link class="zy" to="/index">
				<img src="../assets/img/246062.png" alt="" />
				<p>主页</p>
			</router-link>
			<router-link class="sy" to="/profit">
				<img src="../assets/img/246072.png" alt="" />
				<p>收益</p>
			</router-link>
			<router-link class="tg" to="/extension">
				<img src="../assets/img/24608.png" alt="" />
				<p>推广</p>
			</router-link>
		</div>
		<!-- 模态框 -->
		<div class="motai" @click="sssp">

			<div>
				<div @click="ssrr">X</div>
				<div>
					<p v-for="item in this.bili" :key="item">{{ item }}</p>
				</div>
			</div>
		</div>
		<!-- 模态框 -->
		<div class="motai ts" @click="sp">
			<div class="text">
				<span class="name">专家所申请的彩种，需要满足：当月每期都要有发布预测贴的记录，
				如有任何一期未发布则视为不满足奖励要求</span>
			</div>
		</div>
	</div>
</template>

<script>
	import Head from "../components/Head.vue";
	import getDate from "../utils/time";
	import local from "@/utils/local";
	import Qs from "qs";
	import {OverallProfit,ColorcoinDetails,RevenueDetails,RewardIncome} from "@/api/profit.js"
	export default {
		components: {
			Head
		},
		data() {
			return {
				wu:false,
				pcor:false,
				show:false,
				// 个人详情收益
				DData: {},
				// 奖励数据
				reward: {},
				// 彩币明细
				list: [],
				// 收益详情
				xiangqing: {},
				bili: [],
				dat: "",
				shangdat: "",
				week: "",
				eedtime: "",
				// tab
				tabList: ['彩币明细', '奖励收益'],
				activeIndex: 0,
			};
		},
		mounted() {
			this.ssp();
			this.getData();
			this.ssr();
			this.srr();
		},
		methods: {
			init(TxIncome){
				this.$route.push({
					path:"/tixian",
					query:{
						TxIncome:TxIncome
					}
				})
			},
			// tab
			tabChange(val) {
				this.activeIndex = val;
				console.log(val);
			},
			// 说明
			b2() {
				document.querySelector(".ts").style.visibility = "visible";
			},
			// 个人收益
			getData() {
				OverallProfit().then(res =>{
					// console.log(res,'qqqqqqqqqqq');					
					if(res.Code == 200){
						let Data = res.Data;
						console.log(Data,'11111');
						if( Data == null ||Data == {}){
							this.pcor = false;
						}else{
							this.pcor = true;
							this.DData = Data;						
							console.log(this.DData,'1111111');
						}														
					}

				})
			},
			
			//彩币明细
			ssp() {			
				
				ColorcoinDetails({
					StartTime: "",
					EndTime: ''
				}).then(res =>{
					// console.log(res,'12121212');
					let Data = res.Data;
					if(res.Code == 200){
						// console.log(data.Code,'1111');
						if(Data.length == 0){
							this.show = true;
						}else{
							this.show = false;
							setTimeout(() => {
								this.list = Data;
								document.querySelector('table').style.visibility = 'visible';
							}, 0);
						}
					}else{
						console.log(res.Message);
					}
				})
			},
			
			srr() {
				// 收益详情
				RevenueDetails().then(res =>{
					// console.log(res,'12111111111');
					let Data = res.Data;
					if(res.Code == 200){
						this.xiangqing = Data;
						this.bili = JSON.parse(this.xiangqing.ShareProportionExplain);
						return;
					}else{
						console.log(res.Message);
					}
				})				
			},
			
			ssr() {
				// 奖励收益
				RewardIncome().then(res =>{
					// console.log(res,'1211111');
					if(res.Code == 200){
						this.reward = res.Data;
					}
				})
			},

			// 模态框
			sssp() {
				document.querySelector(".motai").style.visibility = "hidden";
			},
			sp() {
				document.querySelector(".ts").style.visibility = "hidden";
			},
			// 确认按钮
			ssrr() {
				document.querySelector(".motai").style.visibility = "hidden";
			},
			bl() {
				document.querySelector(".motai").style.visibility = "visible";
			},
		},
		async created() {

			this.week = getDate.getLastWeekDays().starttime;
			//当前周开始时间
			this.eedtime = getDate.getCurrWeekDays().starttime;
			// console.log("当前周结束时间" + this.week);
			// console.log("当前周开始时间" + this.eedtime);
			 

		},
		
	};
</script>

<style lang="less" scoped>
	.jing {
		width: 95%;
		word-wrap: break-word;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.suoming {
		
		font-size: 0.75rem;
	}


	.table1 {
		border-spacing: 0;
		border: 0.0625rem solid #AAB4FF;
		border-radius: 0.25rem;
	}

	.table1 tr:nth-child(2n) {
		background: #e7eaff;
	}

	.table1 tr>td:first-child {
		width: 6.375rem;
		font-size: 0.75rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 1.9375rem;
		color: #585858;
	}

	.table1 td {
		text-align: center;

	}

	.table1>tr:first-child>td {
		border-bottom: 1px solid #aab4ff;

	}

	.table1>tr>td:nth-child(2) {
		border-left: 1px solid #aab4ff;
		font-size: 0.875rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.main-wai {
		width: 100%;
		// height: 35.5rem;
		padding-left: 0.625rem;
		padding-right: 0.625rem;
		box-sizing: border-box;
	}

	.main>div {
		margin-bottom: 1rem;
	}

	.main>div:nth-child(2) {
		margin-bottom: 0.8125rem;
	}

	.main>div {
		font-size: 0.9rem;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.main>div>span:nth-child(1) {
		font-size: 0.875rem;
		font-family: Source Han Sans CN;
		font-weight: 500;
		// line-height: 24px;
		color: #333333;
	}

	.main>div>span:nth-child(2) {
		font-size: 0.75rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		// line-height: 20px;
		color: #8E8E93;
	}

	.main {
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-radius: 0.25rem;
		padding-left: 0.625rem;
		padding-right: 0.625rem;
		padding-bottom: 1rem;
		padding-top: 1rem;
		box-sizing: border-box;
	}

	.risk-tab-cont {
		padding: 0 10rpx;
		font-size: 28rpx;

		font-family: PingFang;
		font-weight: 500;

	}

	.risk-active {
		color: #333333;
	}

	.risk-active-line {
		width: 23px;
		height: 4px;
		background: #374EF2;
		border-radius: 2px;
		position: absolute;
		top: 31px;
		left: 36px;
		transition: all 0.3s ease;
	}

	.risk-active-line-f {
		left: 21%;
	}

	.risk-active-line-r {
		left: 72%;
	}

	.Tab {
		width: 100%;
		height: auto;
		background: #fff;
		padding: 1.0625rem 0;
	}

	.risk-tab-top {
		font-size: 1rem;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 1.6875rem;
		color: #5F5F61;
		display: flex;
		padding: 0 3.4375rem;
		position: relative;
		justify-content: space-between;
		border-bottom: 1rpx solid #F1F1F1;

	}

	.risk-cont {
		padding-top: 0.875rem;
	}

	.risk-active-line-s {
		left: 53%;
	}

	* {
		text-decoration: none;
	}

	.syxq>div:first-child>div>span {
		margin-right: 0.5rem;
	}

	.motai>div>div:nth-child(2) {
		font-size: 0.9rem;
		color: #333333;
	}
	
	.text{
		padding: 0 1.25rem;
	}
	.name{
		color: #333;
	}

	.motai>div>div:first-child {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}

	.motai>div {
		width: 90%;
		background-color: #fff;
		border-radius: 5px;
		padding: 1% 2%;
		box-sizing: border-box;
	}

	.motai {
		width: 100%;
		height: 100%;
		background-color: rgba(51, 51, 51, 0.7);
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		display: flex;
		visibility: hidden;
		justify-content: center;
		align-items: center;
	}

	.syxq>div:first-child>div {
		display: flex;
		align-items: center;
	}

	.sqtx {
		width: 40%;
		height: 2.1875rem;
		background: #374ef2;
		opacity: 1;
		border-radius: 1.56rem;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		font-weight: 400;
		color: #ffffff;
		margin-top: 0.625rem;
	}

	.caibi-shuju {
		font-size: 1rem;
		font-weight: 400;
		color: #ff6c00;
		margin-left: 7%;
	}

	.money {
		font-size: 1rem;
		font-family: Source Han Sans CN;
		font-weight: bold;
		// line-height: 27px;
		color: #E5522A;
	}

	.caibi {
		width: 85%;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;
		font-size: 0.9rem;
		font-weight: 500;
		color: #333333;
	}

	.syxq-shuju {
		color: #333333;
		font-weight: 400;
	}

	.box {
		width: 4.125rem;
		height: 1.375rem;
		background: linear-gradient(90deg, #ff8a00 0%, #ff4700 100%);
		border-radius: 0.125rem;
		position: absolute;
		top: -0.65rem;
		left: 0.625rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.8rem;
		font-weight: 500;
		color: #ffffff;
	}

	.syxq>div:first-child,
	// .syxq>div:nth-child(2),
	.syxq>div:nth-child(2) {
		width: 85%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		margin-bottom: 0.875rem;
		font-size: 0.9rem;
		font-weight: 400;
		color: #585858;
	}

	.syxq {
		width: 95%;
		// height: 10rem;
		background: #f7f7f7;
		border-radius: 0.25rem;
		margin: 0 auto;
		// margin-top: 22%;
		position: relative;
		padding-top: 1.43rem;
		padding-bottom: 0.68rem;
		box-sizing: border-box;
		margin-bottom: 1.125rem;
	}

	table {
		width: 100%;
		// height:2.1875rem;
		border-spacing: 0;
		/*去掉单元格间隙*/
		border-radius: 0.25rem 0.25rem 0rem 0rem;
		margin-bottom: 1.5rem;
		// visibility: hidden;
		// visibility: visible;
	}

	.table-list {
		width: 100%;
		height: 5%;
	}

	.table {
		width: 100%;
		height: 2.1875rem;
		background: #ff6c00;
		border-radius: 4px 4px 0px 0px;
	}
	.zan{
		width: 100%;
		height: 2.5rem;
		// line-height: 2.5rem;
		color: #ccc;
		text-align: center;
		
		
	}

	td {
		border-right: 2px solid #e6e6e6;
		border-bottom: solid 2px #e6e6e6;
	}

	.table>td {
		text-align: center;
		font-size: 0.8rem;
		font-weight: 400;
		color: #ffffff;
	}

	.table>td:nth-child(6),
	.table-list>td:nth-child(6) {
		border-right: 0px;
	}

	.table-list>td {
		text-align: center;
		font-size: 0.8rem;
		font-weight: 400;
		line-height: 1.9375rem;
		color: #333333;
	}

	.img2 {
		width: 0.25rem;
		height: 1.4375rem;
		margin-right: 1.875rem;
	}

	.zcfx-top>span {
		font-size: 1.1rem;
		font-weight: 500;
		color: #5f5f61;
	}

	.jia-box {
		height: 10%;
		width: 100%;
	}

	.zcfx-top {
		width: 100%;
		height: 1.4375rem;
		display: flex;
		align-items: center;
		margin-bottom: 1rem;
	}

	.zcfx {
		width: 100%;
		// height: 34rem;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 1.375rem;
		padding-bottom: 1.125rem;
		padding-top: 0.875rem;
	}

	.mian {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.625rem 0;
	}

	.mian-p {
		text-align: center;
	}
	.wu{
		font-size: 0.775rem;
	}

	.Pcolor {
		font-size: 1.25rem;
		font-family: Arial;
		font-weight: bold;
		line-height: 1.4375rem;
		color: #333333;
		margin-left: 0.2125rem;
	}

	.pcor {
		font-size: 2.375rem;
	}

	.p {
		font-size: 0.75rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 1.6875rem;
		color: #A2A2A2;
	}

	.maximum {
		font-size: 1rem;
	}

	.mian-xia {
		padding-top: 1.25rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	// .shuju>div:nth-child(3)>div {
	// 	width: 50%;
	// 	height: 100%;
	// }

	// .shuju>div:nth-child(3)>div>p:first-child {
	// 	font-size: 1.2rem;
	// 	font-weight: bold;
	// 	color: #333333;
	// 	margin-bottom: 0.5rem;
	// }

	// .shuju>div:nth-child(3)>div>p:nth-child(2) {
	// 	font-size: 0.5rem;
	// 	font-weight: 400;
	// 	color: #a2a2a2;
	// }

	// .shuju>div:nth-child(3) {
	// 	width: 100%;
	// 	height: 2.6rem;
	// 	display: flex;
	// 	justify-content: space-between;
	// }

	// .shuju>p:nth-child(2) {
	// 	font-size: 1rem;
	// 	font-weight: 400;
	// 	color: #a2a2a2;
	// 	margin-bottom: 1.25rem;
	// }

	// .shuju>p:first-child {
	// 	font-size: 2.4rem;
	// 	font-weight: bold;
	// 	color: #333333;
	// }

	.shuju {
		width: 100%;
		height: 11rem;
		background-color: #fff;
		border-radius: 0.25rem;
		padding: 1.25rem;
		box-sizing: border-box;
		margin-bottom: 0.9rem;
	}

	.profit {
		width: 100%;
		height: 100%;
		padding-left: 3%;
		padding-right: 3%;
		padding-top: 3%;
		background: #f7f7f7;
		box-sizing: border-box;
	}

	.sy>p {
		color: #374ef2 !important;
	}

	.zy,
	.tg,
	.sy {
		width: 10%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-decoration: none;
	}

	.footer img {
		width: 1.375rem;
		height: 1.375rem;
	}

	.footer p {
		font-size: 0.5rem;
		color: #707070;
	}

	.footer {
		width: 100%;
		height: 7%;
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;
		z-index: 2;
		display: flex;
		justify-content: space-evenly;
	}
</style>
